$(document).ready(function() {
    //获取图片宽度
    const focusWidth = $(".focus").width();
    //获取图片张数
    var size = $("#images li").length;
    var index = 0;
    var timer = null;
    function autoanimate() {
        timer = setInterval(function(){
            if(index > size){
                
                return index = 0;
            }
            $(".arrow-r").click();
        },2000);
    }
    autoanimate();
    function changeImg(){
        var moveWidth = -focusWidth*index;
        $("#images").animate({'left':moveWidth+'px'},1500);
        if(index >= size){
            $("#images").animate({'left':0+'px'},0)
            index = 0
        }
        if(index < 0){
            index = size -1
            $("#images").animate({'left':-focusWidth*index+'px'},0)
        }
    }
    //二级菜单显示隐藏
    $(".dropdown").hover(function(){
        $(this).children("ul").stop().slideToggle();
    });
    //鼠标移动现实左右箭头
    $(".focus").mouseover(function(){
        $(".arrow-l").stop().fadeIn(150);
        $(".arrow-r").stop().fadeIn(150);
        clearInterval(timer);
    });
    $(".focus").mouseout(function(){
        $(".arrow-l").stop().fadeOut(150);
        $(".arrow-r").stop().fadeOut(150);
        autoanimate();
    });
    $(".arrow-r").click(function(){
        index++;
        changeImg();
        $(".circle li").eq(index).addClass("current").siblings().removeClass("current");
    });
    $(".arrow-l").click(function(){
        index--;
        changeImg();
        $(".circle li").eq(index).addClass("current").siblings().removeClass("current");
    });
    //动态创建li
    for (var i = 0; i < size; i++) {
        var li = '<li></li>'
        $(".circle").append(li);
    }
    //克隆第一张图
    var first=$("#images li").eq(0).clone(true)
    $("#images li").eq(3).after(first)
    //小圆点
    $(".circle li").click(function (event) {
        $(this).addClass("current").siblings().removeClass("current");
        index=$(this).index();
        changeImg();
        console.log($(this).index());
    });
    $(".circle li").eq(0).addClass("current")
});


